// dragApi实践----->拖拽排序

const container = document.getElementById('container');
let sourceNode = null
filpObj = new Filp(container);

container.addEventListener("dragstart", (e) => {
  // e.preventDefault();
  // console.log(e.target)
  sourceNode = e.target
  filpObj.start();
  e.dataTransfer.effectAllowed = 'move';
  // 为了保证处于拖拽状态时，dom的样式沿用最开始的样式
  setTimeout(() => {
    sourceNode.classList.add("moving");
  })
});


container.addEventListener("dragenter", (e) => {
  e.preventDefault();
  // 判断拖动元素,筛选出拖拽元素所悬停的元素
  if (e.target === container || e.target === sourceNode) {
    return
  }
  // 判断拖动方向
  const soureIndex = [...container.children].indexOf(sourceNode);
  const targetIndex = [...container.children].indexOf(e.target);
  if (soureIndex < targetIndex) {
    // 向下拖动
    container.insertBefore(sourceNode, e.target.nextSibling);
  } else {
    // 向上拖动
    container.insertBefore(sourceNode, e.target);
  }
  filpObj.end();
});

container.addEventListener("dragover", (e) => {
  e.preventDefault();
});

container.addEventListener("dragend", (e) => {
  e.preventDefault();
  sourceNode.classList.remove("moving");
});
